@keyframes widthChange {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

.container-box {
  .antd-swipe {
    .douyin-Swiper {
      .vertical-content {
        .swiper-slide {
          height: 90vh;
          background-color: #000000;
          display: flex;
          align-items: center;
        }

        .swiper-slide.swiper-slide-active {
          display: flex;
          align-items: center;
        }

        .swiper {
          .swiper-pagination {
            width: 100%;
            padding: 0 7px 0px 12px;
            display: flex;
            align-items: center;
            position: absolute;
            bottom: 11px;
            z-index: 99;
            box-sizing: border-box;

            .swiper-pagination-bullet {
              display: block;
              flex: 1 1 auto;
              height: 3px;
              background: rgba(220, 220, 220, 0.4);
              position: relative;
              margin-right: 2px;
              border-radius: 2px;

              &::after {
                content: '';
                position: absolute;
                width: 0%;
                left: 0;
                top: 0;
                height: 3px;
              }

              &.swiper-pagination-bullet-active {
                &::after {
                  background-color: #fff;
                  animation-name: widthChange;
                  animation-duration: 2s;
                  animation-fill-mode: forwards;
                  border-radius: 2px;
                }
              }
            }
          }
        }
      }
    }
  }
}